<template>
  <div class="file-operation-page">
    <div class="ecahrts-xrq">
      <h1>echarts渲染区</h1>
      <EchartsPreview :width="'900px'" :height="'550px'" :option="option" @echartsCallback="echartsCallback" />
    </div>
    <div class="ecahrts-zsq">
      <h1>echarts展示区</h1>
      <img v-if="echartsUrl" :src="echartsUrl" alt="" />
    </div>
  </div>
</template>

<script setup>
import EchartsPreview from '@/components/echartsComponents/echartsPreview.vue'

// 模拟数据
const dataArr = [
  { date: '5月21日', value: 1000 },
  { date: '5月26日', value: 1500 },
  { date: '5月28日', value: 2000 },
  { date: '5月31日', value: 3000 },
  { date: '6月2日', value: 2500 },
  { date: '6月3日', value: 2800 },
  { date: '6月4日', value: 2600 },
  { date: '6月5日', value: 500 },
  { date: '6月8日', value: 8000 },
  { date: '6月9日', value: 2000 },
  { date: '6月10日', value: 1500 },
  { date: '6月11日', value: 1200 },
  { date: '6月13日', value: 800 },
  { date: '6月14日', value: 700 },
  { date: '6月15日', value: 800 },
  { date: '6月16日', value: 800 },
  { date: '6月18日', value: 900 },
  { date: '6月19日', value: 1000 },
];


// 提取 x 轴和 y 轴数据
const xData = dataArr.map(item => item.date);
const yData = dataArr.map(item => item.value);

// 图表配置项
const option = {
  backgroundColor: '#fff',
  grid: {
    left: '15%',
    right: '15%'
  },
  tooltip: {
    trigger: 'axis',

    // custom会在一次渲染数据时，tooltip会显示两层数据，所以调用formatter函数，只展示一层即可返回自定义的提示框内容
    formatter: function (params) {
      return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value;
    }
  },
  xAxis: {
    type: 'category',
    data: xData,
    axisLabel: {
      rotate: 45,
      interval: 0
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '数值变化',
      type: 'line',
      data: yData,
      markPoint: {
        symbol: 'circle',
        symbolSize: 8,
        label: {
          show: false // 隐藏默认标签，使用自定义标签
        },
        itemStyle: {
          color: '#ff4500' // 标注点颜色
        },
        data: [
          {
            name: '事件初发',
            coord: [xData[0], yData[0]],
            itemStyle: { color: '#0066cc' },
            label: {
              show: true,
              position: [30, -50],
              backgroundColor: 'rgb(255,255,255)',
              borderColor: '#0066cc',
              borderWidth: 1,
              borderRadius: 4,
              padding: 8,
              lineHeight: 18,
              width: 100,
              overflow: 'break',
              formatter: '事件初发：@湖北经视报道称“当地回应张家界一溶洞被排水”'
            },
            symbol: 'circle',
            symbolSize: 0
          },
          {
            name: '违规情况标注',
            coord: [xData[17], yData[17]],
            itemStyle: { color: '#0066cc' },
            label: {
              show: true,
              position: [30, -50],
              backgroundColor: 'rgb(255,255,255)',
              borderColor: '#0066cc',
              borderWidth: 1,
              borderRadius: 4,
              padding: 8,
              lineHeight: 18,
              width: 100,
              overflow: 'break',
              formatter: '张家界通报慈利县三个养殖场涉嫌环境违法情况'
            },
            symbol: 'circle',
            symbolSize: 0
          }
        ]
      },
    },
    {
      type: 'custom',
      coordinateSystem: 'cartesian2d', // 指定坐标系
      renderItem: function (params, api) {
        if (params.dataIndexInside == 0 || params.dataIndexInside == 17) {
          const point = api.coord([api.value(0), api.value(1)]);
          // 绘制连接线
          return {
            type: 'group',
            children: [
              {
                type: 'line',
                shape: {
                  x1: point[0],
                  y1: point[1],
                  x2: point[0] + 30,
                  y2: point[1]
                },
                style: {
                  stroke: '#0066cc',
                  lineDash: 'dashed',
                  lineWidth: 1
                },
              },
            ]
          };
        }
      },
      data: dataArr,
      z: 100
    }
  ]
};


// echarts回调事件
let echartsUrl = ref('')
const echartsCallback = (echarts) => {
  echarts.on('finished', () => {
    let picInfo = echarts.getDataURL({
      type: "png",
      pixelRatio: 3, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
      backgroundColor: "#fff",
    }); //获取到的是一串base64信息

    nextTick(() => {
      echartsUrl.value = picInfo
    })
  })
}


</script>

<style lang="scss" scoped>
.file-operation-page {
  padding: 10px 15px;
  width: 100%;
  height: 100%;
  display: flex;

  >div {
    h1 {
      margin-bottom: 20px;
    }
  }

  .ecahrts-xrq {
    width: 900px;
    margin-right: 20px;
  }

  .ecahrts-zsq {
    width: calc(100% - 920px);

    img {
      width: 450px;
      height: 275px;
    }
  }

  .file-operation {
    width: 100%;
    height: 100px;
  }

  .file-view {
    width: 100%;
    height: calc(100% - 100px);
  }
}
</style>
